<template>
	<div class="sys-org-container">

		
				<screeningCondition :inquireInfo="state.inquireInfo" @getChildren="getData"></screeningCondition>
			
					<el-card  class="full-table" shadow="hover" style="margin-top: 5px">
						<el-table :data="state.Data" v-loading="state.loading" row-key="id" default-expand-all
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border
							highlight-current-row :header-cell-style="{
								background: 'var(--el-color-primary)',
								height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px'
							}" :cell-style="{ padding: '2px' }">
							<el-table-column type="index" label="序号" align="center"></el-table-column>
							<el-table-column prop="materielNum" label="物料号" align="center" show-overflow-tooltip />
							<el-table-column prop="materielName" label="物料名称" header-align="center" align="center"
								show-overflow-tooltip />
							<el-table-column prop="materielSpecs" label="规格型号" align="center" show-overflow-tooltip />
							<el-table-column prop="materielType" label="物料分类" align="center" show-overflow-tooltip />
							<el-table-column prop="materielMainUnit" label="主单位" align="center" width="60"
								show-overflow-tooltip />
							<el-table-column prop="sumCount" label="库存总数" align="center" width="80"
								show-overflow-tooltip />
							<el-table-column label="操作" width="120" fixed="right" align="center" show-overflow-tooltip>
								<template #default="scope">
									<el-button  size="small"  type="primary"
										@click="openEditOrg(scope.row)"> 详情 </el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination v-model:current-page="state.queryParams.page"
							v-model:page-size="state.queryParams.pageSize" :page-sizes="[10, 20, 30, 40]"
							layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
					</el-card>
		

		

		<EditOrg ref="editOrgRef" :title="state.editOrgTitle" />
	</div>
</template>
<script lang="ts" setup name="Location">
import { onMounted, reactive, ref } from 'vue';
import EditOrg from '/@/views/system/inventory/component/EditOrg.vue';
import { WmsApi } from '/@/api/wh';
import screeningCondition from '/@/views/tools/screeningCondition.vue'
const editOrgRef = ref()
const state = reactive({
	loading: false,
	//分页数据
	Data: [],
	value: {},
	queryParams: {
		materielNum: '',
		materielName: '',
		materielType: '',
		materielSpecs: '',
		page: 1,//当前页
		pageSize: 20,

	},
	queryParams1: {
		page: 1,//当前页
		pageSize: 10,
		materielNum: ''
	},

	editOrgTitle: '',
	orgTypeList: [],
	advanced: false,
	color: '#de2910',
	size: '14px',
	total: 0,
	//总数据量
	pageTotal: 0,
	// 总的数据
	ruleForm: [],
	tableData: [],
	inquireInfo: [
		{
			label: "物料号",
			value: "",
			key: "materielNum",
			options: [],
			type: 'input'

		},
		{
			label: "物料名称",
			value: "",
			key: "materielName",
			options: [],
			type: 'input'

		},
		{
			label: "物料分类",
			value: "",
			key: "materielType",
			options: [],
			type: 'input'
		},

		{
			label: "物料规格",
			value: "",
			key: "materielSpecs",
			options: [],
			type: 'input'
		}
	]
});
onMounted(() => {
	getData(state.queryParams);
	//请求接口获得模态框中类型列表的数据，赋值给orgTypeList
})
const rowStyle = ({ row, rowIndex }) => {
	if (row.outboundStatus === 1) {
		return {
			"background": "#C9C7C6",
			// "color":"green"
			"height": '40px'
		}
	} else {
		return {
			"height": '40px'

		}
	}
}


const getData = (value) => {
	state.value = value;
	var params = {
		page: state.queryParams.page,
		pageSize: state.queryParams.pageSize,
		materielNum: value?.materielNum,
		materielName: value?.materielName,
		materielType: value?.materielType,
		materielSpecs: value?.materielSpecs
	}
	WmsApi().InvtoryPagePost(params)

		.then(function (res) {
			state.Data = res.data.result.items;
			state.total = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
}


const handleSizeChange = (val) => {
	state.queryParams.pageSize = val;

	getData(state.queryParams)
};
const handleCurrentChange = (newVal) => {
	state.queryParams.currentPage = newVal;

	getData(state.queryParams);
};



const toggleAdvanced = () => {
	state.advanced = !state.advanced
	console.log(state.advanced);
}
const indexMethod = (index) => {
	return (state.queryParams.currentPage - 1) * state.queryParams.pageSize + index + 1;
}
const fenye = (row) => {
	console.log(row.materielNum);

	WmsApi().InvtoryDetailGet(row.materielNum, state.queryParams1.page, state.queryParams1.pageSize)
		.then(function (res) {

			state.ruleForm = res.data.result.items;
			state.total1 = res.data.result.total

		})
		.catch(function (error) {
			console.log(error);

		})
}
const openEditOrg = (row: any) => {

	state.editOrgTitle = '查看库存详情';
	editOrgRef.value?.openDialog(row);
	console.log("打开页面了");
}

// const handleSizeChange1 = (val) => {
// 	state.queryParams1.pageSize = val;

// 	fenye(state.queryParams1)
// };
// const handleCurrentChange1 = (newVal) => {
// 	state.queryParams1.currentPage = newVal;

// 	fenye(state.queryParams1);
// };
</script>
<style lang="scss">
.fl {
	width: 60%;
	margin: 20px 80px;
}

.container {
	margin-top: 15px;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: calc(100% - 82px);
}

.table {
	width: 100%;
	flex: 1;
	height: 100%;
}

.el-table {
	width: 100%;

	/* overflow: auto; */
}
</style>